<template>
    <el-container class="cantainer-box">
        <el-header>
            <el-button type="primary" @click="refreshMenuGroupList">查询</el-button>
        </el-header>
        <el-main>
            <!-- 分组弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="菜单组" width="300">
                <el-form :model="menuGroup.dataForm">
                    <el-form-item label="分组名称" label-width="100px">
                        <el-input v-model="menuGroup.dataForm.menuGroupName" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="用户类型" label-width="100px">
                        <el-select v-model="menuGroup.dataForm.userType" placeholder="请选择">
                            <el-option v-for="item in baseTypeData.arrayData" :key="item.type" :value="item.type" :label="item.typeName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" label-width="100px">
                        <el-input v-model="menuGroup.dataForm.remark" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureSubmitMenu">确定</el-button>
                </div>
                </template>
            </el-dialog>


            <!-- 菜单弹窗 -->
            <el-dialog v-model="childMenuListVisible" title="菜单" width="300">
                <el-form :model="menuTableState.menuModuleData">
                    <el-form-item label="菜单" label-width="100px">
                        <el-select v-model="menuDetail.menuDetailForm.menuId" placeholder="请选择">
                            <el-option v-for="item in menuTableState.menuModuleData" :key="item.id" :value="item.id" :label="item.menuName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="顺序" label-width="100px">
                        <el-input-number v-model="menuDetail.menuDetailForm.listOrder"/>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="childMenuListVisible = false">取消</el-button>
                        <el-button type="primary" @click="addMenuToGroup">确定</el-button>
                    </div>
                </template>
            </el-dialog>


            <div>
                <el-button type="primary" @click="addMenu">添加</el-button>
            </div>
            <el-table :data="tableState.pageData.records" :border="parentBorder" style="width: 100%">
                <el-table-column type="expand" fixed="left">
                    <template #default="props">
                        <el-table :data="props.row.menuDeailVos" :border="childBorder">
                            <el-table-column fixed="left" label="操作" min-width="100" v-slot="props">
                                <el-button link type="primary" size="small" @click="delGroupChildMenu(props.row.id)">删除</el-button>
                                <el-button link type="primary" size="small" @click="editGroupChildMenu(props.row)">修改</el-button>
                            </el-table-column>
                            <el-table-column label="菜单名称" prop="menuName" />
                            <el-table-column label="菜单路由" prop="routerUrl" />
                            <el-table-column label="排序编号" prop="listOrder" />
                        </el-table>
                    </template>
                </el-table-column>

                <el-table-column fixed="left" label="操作" min-width="150" v-slot="scope">
                    <el-button link type="primary" size="small" @click="openChildMenuBox(scope.row)">添加菜单</el-button>
                    <el-button link type="primary" size="small" @click="editMenu(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="deleteMenu(scope.row.id)">删除</el-button>
                </el-table-column>
                
                <el-table-column prop="menuGroupName" label="菜单组名称" min-width="100"></el-table-column>
                <el-table-column prop="userType" label="用户类型" min-width="180"></el-table-column>
                <el-table-column prop="remark" label="备注" min-width="100"></el-table-column>
                <el-table-column prop="addTime" label="添加时间" min-width="120"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间" min-width="120"></el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:current-page="tableState.pageData.pageNum"
                    v-model:page-size="tableState.pageData.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="sizes, prev, pager, next"
                    :total="tableState.pageData.recordsTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-footer>
    </el-container>

    
</template>
<script lang="ts" setup name="MenuManage">

import { ref,reactive, onMounted } from 'vue'
import { getMenuAllApi } from '@/http/api/menu/menu';
import { delMenuGroupApi,addMenuGroupApi,updateMenuGroupApi,getMenuGroupTreeListApi } from '@/http/api/menu/menuGropu';
import { delMenuGroupDetailApi,addMenuGroupDetailApi, updateMenuGroupDetailApi } from '@/http/api/menu/menuGroupDetail';
import { getTypesByCodeApi } from '@/http/api/base/baseType';
import { type MyPageParamType,MyPageData } from '@/bean/base/page';
import { type MenuGroupType,MenuData, MenuDetailData, MenuDetailVoType, MenuGroupData, MenuGroupDetailType } from '@/bean/menu/AllMenuType';
import type { ComponentSize  } from 'element-plus';
import { ElMessage } from 'element-plus';
import { MyBaseType } from '@/bean/base/baseType';
import { MyArrayData } from '@/bean/base/base';

const parentBorder = ref(false);
const childBorder = ref(false);
const dialogFormVisible = ref(false);
const childMenuListVisible = ref(false);


const menuGroup = reactive(new MenuGroupData());


const menuDetail = reactive(new MenuDetailData());


const baseTypeData = reactive(new MyArrayData<MyBaseType>());

const pageParam:MyPageParamType = reactive({
    pageNum: 1,
    pageSize: 10
});

const typesParam = reactive({code:1 });


let tableState = reactive(new MyPageData<MenuGroupType>());

let menuTableState = reactive(new MenuData());


onMounted(() => {
    getTypesByCode();
    refreshMenuGroupList();
    getMenuList();
})


function getTypesByCode() {
    getTypesByCodeApi(typesParam).then((res)=>{
        baseTypeData.arrayData = res.data;
    });
}


//获取页面数据
async function refreshMenuGroupList() {
    getMenuGroupTreeListApi(pageParam).then((res)=>{
        tableState.pageData = res.data;
    });
}

async function getMenuList() {
    getMenuAllApi().then((res)=>{
        menuTableState.menuModuleData = res.data;
    });
}


function addMenuToGroup() {
    if(menuDetail.menuDetailForm.id == null) {
        addMenuGroupDetailApi(menuDetail.menuDetailForm).then((res)=>{
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            childMenuListVisible.value = false;
            refreshMenuGroupList();
        })
    } else {
        updateMenuGroupDetailApi(menuDetail.menuDetailForm).then((res)=>{
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            childMenuListVisible.value = false;
            refreshMenuGroupList();
        })
    }
    
}


function sureSubmitMenu() {
    if(menuGroup.dataForm.id == null) {
        addMenuGroupApi(menuGroup.dataForm).then((res) => {
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshMenuGroupList();
        })
    } else {
        updateMenuGroupApi(menuGroup.dataForm).then((res) => {
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshMenuGroupList();
        })
    }
    
}


function openChildMenuBox(item:MenuGroupType) {
    childMenuListVisible.value = true;
    menuDetail.menuDetailForm.menuGroupId = item.id;
}

function addMenu() {
    menuGroup.dataForm = new MenuGroupData().dataForm;
    dialogFormVisible.value = true;
}

const editMenu = (item:MenuGroupType) => {
  menuGroup.dataForm = item;
  dialogFormVisible.value = true;
}


const deleteMenu = (id:number) => {
    delMenuGroupApi(id).then((res)=>{
        if(res.code != 200) return;
        ElMessage({
            message: '操作成功',
            type: 'success',
        })
        refreshMenuGroupList();
    })
    
}

const delGroupChildMenu = (id:number) => {
    delMenuGroupDetailApi(id).then((res)=>{
        if(res.code != 200) return;
        ElMessage({
            message: '操作成功',
            type: 'success',
        })
    })

    refreshMenuGroupList();
}

const editGroupChildMenu = (item:MenuDetailVoType) => {
    menuDetail.menuDetailForm.menuGroupId = item.groupId;
    menuDetail.menuDetailForm.menuId = item.menuId;
    menuDetail.menuDetailForm.id = item.id;
    menuDetail.menuDetailForm.listOrder = item.listOrder;
    childMenuListVisible.value = true;
}



const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)


const handleSizeChange = (val: number) => {
    pageParam.pageSize = val;
    refreshMenuGroupList();
}
const handleCurrentChange = (val: number) => {
    pageParam.pageNum = val;
    refreshMenuGroupList();
}

</script>

<style scoped>


.default-table-box,.el-container {
  width: 100%;
  height: 100%;
}

.el-footer {
    height: 80px;
}
    
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>